<template>
	<view style="background-color: #f8f8f8;">
		<view class="jiejuewenti-tabs">
			<label :class="{'jiejuewenti-tab':true,active:current==1}" @click="ontabClick(1)">已完成</label>
			<label :class="{'jiejuewenti-tab':true,active:current==2}" @click="ontabClick(2)">处理中</label>
		</view>
		<view class="jiejuewenti-list">
			<view class="jiejuewenti-list-item"  v-for="item in list" :key="item.id"
				style="display: flex;justify-content: space-between;line-height: 80rpx;color:#333333">
				<view style="width: 600rpx;height:80rpx; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{item["报事位置"]+','+item["报事描述"]}}
				</view>
				<!-- <navigator :url="'/ticketSystem/ticketDetail/ticketDetail?id='+item.id">
				<view style="color: #31A9FC;font-size: 28rpx;">
					详情
				</view>
			</navigator>
 -->
			</view>
			
			<view v-if="list.length==0" style="text-align: center;">
				<image src="../../static/icon/9.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
				<view>暂无数据</view>
			</view>
		</view>
	
		<!-- 	<view class="" @click="getMore">
			加载更多
		</view> -->
	</view>
</template>

<script>
	export default {
		props: ["process"],
		data() {
			return {
				current: 1,
				list: []
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			ontabClick(e) {
				this.current = e
					this.getList()
			},
			getList() {
				let params = {
					"所属项目": uni.getStorageSync('projId'),
					"工单状态列表": this.current ==1 ? ["completed", "completedwithtimeout"]: ["pending", "unclaimed","handling"],
					"工单进程": this.process,
					"pagination": {
						"current": 1,
						"pageSize": 30
					},
					"sorter": {
						"field": "工单编号",
						"order": 0
					}
				}
				uni.showLoading({
					title:"加载中"
				})
				this.$http2.post("ticketSystem/ticket/list", params).then(res => {
					if (res.code === 10000) {
						this.list = res.data.list || []
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.jiejuewenti-tabs {
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.jiejuewenti-tab {
		padding: 16rpx;
		font-size: 28rpx;

	}

	.jiejuewenti-tab.active {
		color: #008EF6;
		border-bottom: 6rpx solid #007AFF;
	}
	.jiejuewenti-list{
		padding: 20rpx;
		font-size: 28rpx;
		.jiejuewenti-list-item{
			background-color: #FFF;
			margin-bottom: 10rpx;
			border-radius: 6rpx;
			padding: 20rpx;
		}
	}

</style>
